<template>
  <div class="login">
    <div class="return" @click="jump">
      <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 48 48"
        fill="rgba(255, 255, 255, 1)">
        <path d="M0 0h48v48H0z" fill="none" />
        <path d="M40 22H15.66l11.17-11.17L24 8 8 24l16 16 2.83-2.83L15.66 26H40v-4z" />
      </svg>
    </div>
    <div class="img">
      <img :src="src" alt="">
    </div>
    <div class="user">用户</div>
    <van-loading type="spinner" size="24px" color="#fff" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { info } from '@/api/api'
import useZBStore from '@/pinia'
const store = useZBStore()
const route = useRoute()
const router = useRouter()
const src = ref('')
const time = ref()
onMounted(async () => {
  console.log(route.query);
  let res = await info(route.query)
  src.value = res.data.toux

})
const jump = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('id')
  store.removeToken()
  clearTimeout(time.value)
  router.replace('/login')
}
time.value = setTimeout(() => {
  router.replace('/home')
}, 2000)
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background-size: 100%;
}

.return {
  margin-left: 52px;
  margin-top: 41px;

  svg {
    width: 55px;
    height: 55px;
  }
}

.login::after {
  content: "";
  background: url('@/images/cake01.jpg') no-repeat;
  background-size: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.img {
  width: 128px;
  height: 128px;
  margin: 300px auto 0;
  border-radius: 50%;
  border: rgba(255, 141, 26, 1) solid 7px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;

  }
}


.user {
  text-align: center;
  margin-top: 30px;
  font-size: 32px;
}

.van-loading {
  text-align: center;
  margin-top: 50px;

}
</style>